<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		    *{
		    	margin: 0;
		    	padding: 0;
		    }
		    ul{
		    	    width: 180px;
				height: 270px;
				line-height: 53px;
		    }
		    li{
		    	    width: 180px;
				height: 53px;
				border-bottom: 1px solid #000000;
		    	    list-style-type: none;
		    	    position: relative;
		    }
		    a{
		    	     color: #000;
		    	     text-decoration: none;
		    }
		    #box{
		    	    width: 364px;
		    	    height: 270px;
		    	    position: absolute;
		    }
			#wrap{
				width: 180px;
				height: 270px;
				background: gainsboro;
				border: 1px solid #000;
				position: absolute;
				float: left;
				display: none;
			}
			#aUl li a{
				margin-left: 10px;
				padding-right: 80px;
			}
			#container{
				width: 180px;
				height: 270px;
				float: right;
			}
			#container_a{
				width: 180px;
				height: 270px;
				border: 1px solid #000;
				background: gainsboro;
				position: absolute;
				left: 180px;
				top: 0;
				display: none;
			}
			#container_a img{
				width: 180px;
				height: 270px;
			}
		</style>
	</head>
	<body>
	  <div id="box">
		<div id="wrap">
			<ul id="aUl">
				<li class="abc">
					<a href="###">来啊来啊</a>
					<span>></span>
					<div id="container_a">
					<img src="http://ww3.sinaimg.cn/bmiddle/9499f9e8gw1eeigxbvi8pg20ba06htiv.gif" alt="" />
				    </div>
				</li>
				<li class="abc">
					<a style="padding-right: 115px;" href="###">LOL</a>
					<span>></span>
					<div id="container_a">
					<ul>
						<li><a href="###">薇恩</a></li>
						<li><a href="###">亚索</a></li>
						<li><a href="###">小炮</a></li>
					</ul>
			        </div>
				</li>
				<li>
					<a href="###">嘿嘿嘿</a>
				</li>
				<li class="abc">
					<a href="###">打开方式</a>
					<span>></span>
					<div id="container_a">
					<ul>
						<li><a href="###">百度</a></li>
						<li><a href="###">谷歌</a></li>
						<li><a href="###">火狐</a></li>
					</ul>
			        </div>
				</li>
				<li>
					<a href="###">保存</a>
				</li>
			</ul>
		</div>
	  </div>
	</body>
	<script type="text/javascript">
	// 获取所需的元素
		var wrap = document.getElementById("wrap");
		var aLi = document.querySelectorAll('#aUl li');
		var lis = document.querySelectorAll('.abc');
		var box = document.getElementById("box")
		var container = document.querySelectorAll("#container_a");
		var n=0;
		var index = 0;
		document.oncontextmenu = function(ev){ //鼠标点击时触发该事件
			var e = ev || window.event; //event对象的兼容写法
			e.preventDefault(); //阻止默认事件
            box.style.left = e.clientX + 'px'; //相对于可视窗口的横向偏移位置
            box.style.top = e.clientY + 'px'; //相对于可视窗口的纵向偏移位置
			wrap.style.display = 'block'; //wrap显示
		}
		for(var i=0;i<aLi.length;i++){
			aLi[i].index = i;
			aLi[i].onmouseover = function(){
				for(var i=0;i<aLi.length;i++){
					aLi[i].style.background = 'gainsboro'; //变量初始化
				}
				this.style.background = 'deepskyblue'; //改变当前移入元素的背景颜色
			}
			aLi[i].onmouseout = function(){
				for(var i=0;i<aLi.length;i++){
					
				}
				this.style.background = 'gainsboro'; //改变当前移出元素的背景颜色
			}
		}
		for(var i=0;i<lis.length;i++){
			lis[i].index = i;
			lis[i].onmouseover = function(){
				for(var i =0;i<lis.length;i++){ //初始化
					lis[i].style.background = 'gainsboro';
					container[i].style.display = 'none';
				}
				this.style.background = 'deepskyblue';  //改变当前移入元素的背景颜色
				container[this.index].style.display = 'block'; //当前移入元素显示
			}
			lis[i].onmouseout = function(){
				for(var i=0;i<lis.length;i++){
					
				} 
				container[this.index].style.display = 'none'; //当前移出元素隐藏
			}
		}
	</script>
</html>
